<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<html >
<head>
    <meta charset="UTF-8">
    <title>Contest Edit - Online Judge</title>
    <link rel="stylesheet" th:href="@{/css/styles.css}" >
    <link rel="stylesheet" th:href="@{/js/editormd/css/editormd.css}" />
    <script th:src="@{/js/jquery-1.7.2.js}"></script>
    <script th:src="@{/js/gdoj.js}"></script>
</head>
<body>
<div th:replace="common::web-navbar"></div>
<div class="container">
    <div class="content">
        <div class="content-with-sidebar"> 	 <!-- class="content-with-sidebar" -->
            <div th:replace="admin/admin-common::admin-navbar"></div>
            <div class="contest-edit-box">
                <form action="" method="post">
                    <div class="problem-params" style="width: 99%">
                        Contest Start Time:<input style="width: 100px" class="start-date" name="start_date" readonly="readonly" th:value="${#dates.format(contest.start_time,'yyyy-MM-dd')}">
                        <input style="width: 24px" class="shour" name="shour" th:value="${#dates.format(contest.start_time,'HH')}">HH
                        <input style="width: 24px" class="sminute" name="sminute" th:value="${#dates.format(contest.start_time,'mm')}">MM
                        <br/>
                        Contest End Time&nbsp;&nbsp;:<input style="width: 100px" class="end-date" name="end_date" readonly="readonly" th:value="${#dates.format(contest.end_time,'yyyy-MM-dd')}">
                        <input style="width: 24px" class="ehour" name="ehour" th:value="${#dates.format(contest.end_time,'HH')}">HH
                        <input style="width: 24px" class="eminute" name="eminute"  th:value="${#dates.format(contest.end_time,'mm')}">MM
                        <br/>
                        Start Register Time:<input style="width: 100px" class="start-reg-date" name="start_reg_date" readonly="readonly" th:value="${#dates.format(contest.start_reg,'yyyy-MM-dd')}">
                        <input style="width: 24px" class="shour_reg" name="shour_reg" th:value="${#dates.format(contest.start_reg,'HH')}" >HH
                        <input style="width: 24px" class="sminute_reg" name="sminute_reg" th:value="${#dates.format(contest.start_reg,'mm')}" >MM
                        <br/>
                        End Register Time&nbsp;&nbsp;:<input style="width: 100px" class="end-reg-date" name="end_reg_date" readonly="readonly" th:value="${#dates.format(contest.end_reg,'yyyy-MM-dd')}">
                        <input style="width: 24px" class="ehour_reg" name="ehour_reg" th:value="${#dates.format(contest.end_reg,'HH')}" >HH
                        <input style="width: 24px" class="eminute_reg" name="eminute_reg" th:value="${#dates.format(contest.end_reg,'mm')}" >MM
                        <BR>Contest Type&nbsp;&nbsp;&nbsp;&nbsp;:<select class="contest-type-option" name="type">
                            <option value="0" th:if="${contest.type==0}" selected="selected">ACM/ICP</option>
                            <option value="0" th:if="${contest.type!=0}">ACM/ICP</option>
                            <option value="1" th:if="${contest.type==1}" selected="selected">Google Code Jam</option>
                            <option value="1" th:if="${contest.type!=1}">Google Code Jam</option>
                        </select>
                    </div>
                    <input type="hidden" name="contestId" th:value="${contest.contest_id}" >
                    <H5><span>[[#{contest.title}]]</span></H5>
                    <input class="message-title" name="title" th:value="${contest.title}" th:placeholder="#{contest.title}" maxlength="128">
                    <H5><span>[[#{contest.description}]]</span></H5>
                    <div class="editor-md" id="editor-contest-desc">
                        <textarea name="description" style="display:none;" th:utext="${contest.description}"></textarea>
                    </div>
                    <div style="margin-top: 12px;">
                        <input class="button_submit" type="submit" th:value="#{topic.btn_post}" >
                        <span class="fielderror"></span>
                    </div>
                </form>
            </div>
            <br>
        </div>
        <div class="sidebar" th:replace="sidebar::web-sidebar"></div>
    </div>
    <div th:replace="common::web-footer"></div>
</div>

<script th:src="@{/js/editormd/editormd.min.js}"></script>
<script type='text/javascript' th:src='@{/js/editor-md.js}'></script>
<script type="text/javascript" th:src="@{/js/datepick/datepick.js}"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('input.start-date').datepick({
            dateFormat: 'yy-mm-dd',
            changeMonth: true,
            changeYear: true,
            yearRange: "-100:1",
            showOn: 'both',
            buttonImageOnly: true,
            buttonImage: '/js/datepick/dateIcon.gif'
        });
        $('input.end-date').datepick({
            dateFormat: 'yy-mm-dd',
            changeMonth: true,
            changeYear: true,
            yearRange: "-100:1",
            showOn: 'both',
            buttonImageOnly: true,
            buttonImage: '/js/datepick/dateIcon.gif'
        });
        $('input.start-reg-date').datepick({
            dateFormat: 'yy-mm-dd',
            changeMonth: true,
            changeYear: true,
            yearRange: "-100:1",
            showOn: 'both',
            buttonImageOnly: true,
            buttonImage: '/js/datepick/dateIcon.gif'
        });
        $('input.end-reg-date').datepick({
            dateFormat: 'yy-mm-dd',
            changeMonth: true,
            changeYear: true,
            yearRange: "-100:1",
            showOn: 'both',
            buttonImageOnly: true,
            buttonImage: '/js/datepick/dateIcon.gif'
        });
        var formSubmitListener = function () {
            var id = $(this).find("input[name=contestId]").val();
            var title = $(this).find("input[name=title]").val();
            var desc = $(this).find("textarea[name=description]").val();
            var start_date = $(this).find("input[name=start_date]").val();
            var shour = $(this).find("input[name=shour]").val();
            var sminute = $(this).find("input[name=sminute]").val();
            var end_date = $(this).find("input[name=end_date]").val();
            var ehour = $(this).find("input[name=ehour]").val();
            var eminute = $(this).find("input[name=eminute]").val();
            var start_reg_date = $(this).find("input[name=start_reg_date]").val();
            var shour_reg = $(this).find("input[name=shour_reg]").val();
            var sminute_reg = $(this).find("input[name=sminute_reg]").val();
            var end_reg_date = $(this).find("input[name=end_reg_date]").val();
            var ehour_reg = $(this).find("input[name=ehour_reg]").val();
            var eminute_reg = $(this).find("input[name=eminute_reg]").val();
            var type = $('.contest-type-option option:selected').val();
            postContent = function () {
                var formData = { "contest_id":id, "title":title, "description":desc,
                    "start_time":start_date + " " + shour + ":" + sminute + ":00",
                    "end_time":end_date + " " + ehour + ":" + eminute + ":00",
                    "start_reg":start_reg_date + " " + shour_reg + ":" + sminute_reg + ":00",
                    "end_reg":end_reg_date + " " + ehour_reg + ":" + eminute_reg + ":00",
                    "type":type}
                $.ajax({
                    type : "post",
                    url : "/api/admin/contest/post",
                    data : JSON.stringify(formData),
                    contentType:"application/json",
                    dataType : "json",
                    success : function(data) {
                        if (data.code != 200) {
                            $(".fielderror").html(data.msg);
                            $("#reply-content").focus();
                            return;
                        }

                        $('input[type=submit]', this).attr('disabled', 'disabled');
                        $('.button_submit').attr('disabled', 'disabled');
                        window.location.href="/admin/contests";
                    }
                });
            };
            postContent();
            return false;
        }
        $(".contest-edit-box").find("form").submit(formSubmitListener);
    });
</script>
</body>
</html>
